<script setup lang="ts">
import { useDraggable } from 'vue-draggable-plus'
import { NScrollbar } from 'naive-ui'
import sharedForm from '../sharedForm'
import { ref, reactive } from 'vue'

const model = reactive(sharedForm.names.map((type) => ({ type, id: sharedForm.getUid() })))
const draggableRef = ref<HTMLElement | null>(null)

useDraggable(draggableRef, ref(model), {
  group: {
    name: 'elements',
    pull: 'clone',
    put: false
  },
  animation: 150,
  onClone(e) {
    model[e.oldIndex!].id = sharedForm.getUid()
  }
})
</script>

<template>
  <div class="form-control">
    <NScrollbar class="form-control__scrollbar">
      <div
        class="form-controls"
        ref="draggableRef"
      >
        <component
          v-for="(e, i) in model"
          :key="i"
          :is="sharedForm.getElementByType(e.type)"
          class="form-control__item"
          :title="e.type"
        />
      </div>
    </NScrollbar>
  </div>
</template>

<style scoped>
.form-control {
  width: 300px;
  padding: 10px;
}

.form-control__scrollbar {
  max-height: 100%;
}

.form-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px 0;
}

.form-control .form-control__item {
  width: 100%;
}
</style>
